import React from 'react';
import { Card, Form, Input, Select, Switch, InputNumber, ColorPicker, Space, Button, Divider, Tabs } from 'antd';
import { 
  SettingOutlined, 
  BgColorsOutlined, 
  ThunderboltOutlined,
  DeleteOutlined,
  CopyOutlined
} from '@ant-design/icons';

const { TextArea } = Input;
const { Option } = Select;

export default function PropertyPanel({ component, onUpdate }) {
  const [form] = Form.useForm();

  React.useEffect(() => {
    if (component) {
      form.setFieldsValue({
        ...component.props,
        ...component.style
      });
    }
  }, [component, form]);

  const handleValuesChange = (changedValues, allValues) => {
    if (!component) return;

    const updatedComponent = { ...component };
    
    // 分离属性和样式
    const props = {};
    const style = {};
    
    Object.keys(allValues).forEach(key => {
      if (['width', 'height', 'fontSize', 'color', 'backgroundColor', 'margin', 'padding', 'borderRadius'].includes(key)) {
        style[key] = allValues[key];
      } else {
        props[key] = allValues[key];
      }
    });

    updatedComponent.props = props;
    updatedComponent.style = style;
    
    onUpdate(updatedComponent);
  };

  if (!component) {
    return (
      <div style={{ padding: 16, textAlign: 'center', color: '#999' }}>
        <SettingOutlined style={{ fontSize: 48, marginBottom: 16 }} />
        <div>请选择一个组件来编辑属性</div>
      </div>
    );
  }

  // 根据组件类型渲染不同的属性配置
  const renderPropertyFields = () => {
    const { type } = component;

    switch (type) {
      case 'text':
        return (
          <>
            <Form.Item label="文本内容" name="content">
              <TextArea rows={3} placeholder="请输入文本内容" />
            </Form.Item>
            <Form.Item label="字体大小" name="fontSize">
              <InputNumber min={12} max={72} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="文字颜色" name="color">
              <ColorPicker />
            </Form.Item>
          </>
        );

      case 'image':
        return (
          <>
            <Form.Item label="图片地址" name="src">
              <Input placeholder="请输入图片URL" />
            </Form.Item>
            <Form.Item label="替代文本" name="alt">
              <Input placeholder="请输入替代文本" />
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={50} max={800} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="高度" name="height">
              <InputNumber min={50} max={600} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      case 'button':
        return (
          <>
            <Form.Item label="按钮文本" name="text">
              <Input placeholder="请输入按钮文本" />
            </Form.Item>
            <Form.Item label="按钮类型" name="type">
              <Select>
                <Option value="primary">主要按钮</Option>
                <Option value="default">默认按钮</Option>
                <Option value="dashed">虚线按钮</Option>
                <Option value="text">文本按钮</Option>
                <Option value="link">链接按钮</Option>
              </Select>
            </Form.Item>
            <Form.Item label="按钮大小" name="size">
              <Select>
                <Option value="large">大</Option>
                <Option value="middle">中</Option>
                <Option value="small">小</Option>
              </Select>
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <Input placeholder="auto, 100px, 50%" />
            </Form.Item>
          </>
        );

      case 'input':
        return (
          <>
            <Form.Item label="占位符" name="placeholder">
              <Input placeholder="请输入占位符文本" />
            </Form.Item>
            <Form.Item label="输入类型" name="inputType">
              <Select>
                <Option value="text">文本</Option>
                <Option value="password">密码</Option>
                <Option value="number">数字</Option>
                <Option value="email">邮箱</Option>
                <Option value="tel">电话</Option>
              </Select>
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={100} max={500} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      case 'textarea':
        return (
          <>
            <Form.Item label="占位符" name="placeholder">
              <Input placeholder="请输入占位符文本" />
            </Form.Item>
            <Form.Item label="行数" name="rows">
              <InputNumber min={1} max={10} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={200} max={600} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      case 'select':
        return (
          <>
            <Form.Item label="占位符" name="placeholder">
              <Input placeholder="请输入占位符文本" />
            </Form.Item>
            <Form.Item label="选项" name="options">
              <TextArea 
                rows={4} 
                placeholder="请输入选项，格式：value:label，每行一个"
                onChange={(e) => {
                  const options = e.target.value.split('\n')
                    .filter(line => line.trim())
                    .map(line => {
                      const [value, label] = line.split(':');
                      return { value: value?.trim(), label: label?.trim() || value?.trim() };
                    });
                  form.setFieldValue('options', options);
                }}
              />
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={100} max={500} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      case 'checkbox':
      case 'radio':
        return (
          <>
            <Form.Item label="标签文本" name="text">
              <Input placeholder="请输入标签文本" />
            </Form.Item>
            <Form.Item label="默认选中" name="checked" valuePropName="checked">
              <Switch />
            </Form.Item>
          </>
        );

      case 'switch':
        return (
          <Form.Item label="默认状态" name="checked" valuePropName="checked">
            <Switch />
          </Form.Item>
        );

      case 'datepicker':
        return (
          <>
            <Form.Item label="占位符" name="placeholder">
              <Input placeholder="请输入占位符文本" />
            </Form.Item>
            <Form.Item label="日期格式" name="format">
              <Select>
                <Option value="YYYY-MM-DD">YYYY-MM-DD</Option>
                <Option value="YYYY/MM/DD">YYYY/MM/DD</Option>
                <Option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</Option>
              </Select>
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={150} max={300} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      case 'table':
        return (
          <>
            <Form.Item label="列配置" name="columns">
              <TextArea 
                rows={4} 
                placeholder="请输入列配置，格式：title:dataIndex，每行一个"
              />
            </Form.Item>
            <Form.Item label="数据源" name="dataSource">
              <TextArea 
                rows={4} 
                placeholder="请输入数据源，JSON格式"
              />
            </Form.Item>
          </>
        );

      case 'chart':
        return (
          <>
            <Form.Item label="图表类型" name="type">
              <Select>
                <Option value="bar">柱状图</Option>
                <Option value="line">折线图</Option>
                <Option value="pie">饼图</Option>
                <Option value="area">面积图</Option>
              </Select>
            </Form.Item>
            <Form.Item label="宽度" name="width">
              <InputNumber min={200} max={800} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="高度" name="height">
              <InputNumber min={200} max={600} style={{ width: '100%' }} />
            </Form.Item>
          </>
        );

      default:
        return (
          <Form.Item label="组件类型">
            <Input value={type} disabled />
          </Form.Item>
        );
    }
  };

  return (
    <div style={{ padding: 16, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
      <Card 
        size="small" 
        title={
          <Space>
            <SettingOutlined />
            属性配置
          </Space>
        }
        style={{ marginBottom: 16 }}
      >
        <div style={{ marginBottom: 8 }}>
          <strong>{component.label || component.type}</strong>
        </div>
      </Card>

      <Tabs
        items={[
          {
            key: 'props',
            label: '属性',
            icon: <SettingOutlined />,
            children: (
              <Form
                form={form}
                layout="vertical"
                size="small"
                onValuesChange={handleValuesChange}
              >
                {renderPropertyFields()}
              </Form>
            )
          },
          {
            key: 'style',
            label: '样式',
            icon: <BgColorsOutlined />,
            children: (
              <Form
                form={form}
                layout="vertical"
                size="small"
                onValuesChange={handleValuesChange}
              >
                <Form.Item label="宽度" name="width">
                  <Input placeholder="100px, 50%, auto" />
                </Form.Item>
                <Form.Item label="高度" name="height">
                  <Input placeholder="100px, auto" />
                </Form.Item>
                <Form.Item label="字体大小" name="fontSize">
                  <InputNumber min={12} max={72} style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item label="文字颜色" name="color">
                  <ColorPicker />
                </Form.Item>
                <Form.Item label="背景颜色" name="backgroundColor">
                  <ColorPicker />
                </Form.Item>
                <Form.Item label="外边距" name="margin">
                  <Input placeholder="16px, 8px 16px" />
                </Form.Item>
                <Form.Item label="内边距" name="padding">
                  <Input placeholder="16px, 8px 16px" />
                </Form.Item>
                <Form.Item label="圆角" name="borderRadius">
                  <InputNumber min={0} max={50} style={{ width: '100%' }} />
                </Form.Item>
              </Form>
            )
          },
          {
            key: 'events',
            label: '事件',
            icon: <ThunderboltOutlined />,
            children: (
              <div style={{ padding: 16, textAlign: 'center', color: '#999' }}>
                <ThunderboltOutlined style={{ fontSize: 48, marginBottom: 16 }} />
                <div>事件配置功能开发中...</div>
              </div>
            )
          }
        ]}
      />
    </div>
  );
} 